
/**
 *  js机制：1rem = 根元素fontSize px
 *  使fontSize自适应页面宽度，从而使所有的rem单位都是自适应的
 *
 *  官方以IPhone6的页面宽度为标准 750px，1px转为2rem
 *  由👆 得：1px = 1/(750/10)/2 rem
 *  则👇 封装传入多少px就多少除以fontSize，得到rem单位的值（自适应）
*/
$fonSize: 37.5; // 写死！这个fontSize不是根元素自适应那个
@function px2rem($px){
  @return ($px / $fonSize) +rem;
}

// 图标样式
.icon{
  font-size: px2rem(20);
  color: #333;
}

// mixin居中样式代码片段
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

// mixin省略号样式代码片段
@mixin ellipsis() {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

// mixin多行省略号样式代码片段
@mixin ellipsis2($line) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
  word-break: keep-all;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: break-word;
}

// 动画样式
.slide-down-enter, .slide-down-leave-to{
  transform: translate3d(0, -100%,0); // 向下动画
}
.slide-up-enter,.slide-up-leave-to{
  transform: translate3d(0,px2rem(132),0); // 向上动画
  // transform: translate3d(0,100%,0); // 向上动画
}
// 字体选择器向上动画
.popup-slide-up-enter, .popup-slide-up-leave-to{
  transform: translate3d(0,100%,0); // 向上动画
}
// 目录抽屉右滑动画
.slide-right-enter{
  transform: translate3d(100%, 0, 0);  // 向右动画（一个name只能定义个方向，做不到同时左滑右滑）
}
.slide-right-leave-to {
  transform: translate3d(-100%, 0, 0);  // 向左动画
}
.slide-down-enter-to, .slide-down-leave,
.slide-up-enter-to, .slide-up-enter-leave,
.popup-slide-up-enter-to, .popup-slide-up-leave,
.slide-right-enter-to, .slide-right-leave{
  transform: translate3d(0,0,0);  // 恢复原位动画
}
.slide-up-enter-active, .slide-down-leave-active,
.slide-down-enter-active, .slide-up-leave-active,
.popup-slide-up-enter-active, .popup-slide-up-leave-active,
.fade-enter-active,.fade-leave-active,
.slide-right-enter-active, .slide-right-leave-active{
  transition: all .2s linear;
}
// 蒙板渐隐渐现动画
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.fade-enter-to, .fade-leave {
  opacity: 1;
}
